<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogShow"
      width="60%"
      @close="closeDialog"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="80px"
        :inline="true"
        size="normal"
        label-position="right"
        class="form-inline"
      >
        <el-form-item label="归属学科" prop="subject_id">
          <el-select
            v-model="formData.subject_id"
            placeholder="请选择"
            @change="subChange"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="归属班级"
          prop="class_id"
          style="margin-left: 70px"
        >
          <el-select v-model="formData.class_id" placeholder="请选择">
            <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.class_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学生姓名" prop="student_name">
          <el-input
            v-model="formData.student_name"
            style="width: 280px"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="student_phone">
          <el-input
            v-model="formData.student_phone"
            style="width: 280px"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="student_password">
          <el-input
            v-model="formData.student_password"
            style="width: 280px"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="student_sex">
          <el-radio-group v-model="formData.student_sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="student_state">
          <el-radio-group v-model="formData.student_state">
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">正常</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="small" @click="dialogShow = false">取消</el-button>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getSubjectInfoAPi,
  getClassInfoApi,
  editStudentInfoApi,
  addStudentInfoApi,
} from "@/api/student";
export default {
  name: "AddStudent",
  data() {
    return {
      subjectList: [], //归属学科数据
      classList: [], //归属班级数据
      dialogShow: false,
      formData: {
        student_state: 1,
        student_sex: 1,
        class_id: "",
        student_name: "",
        student_password: "",
        subject_id: "",
        student_phone: "",
      },
      formRules: {
        student_name: [{ required: true, message: "请输入", trigger: "blur" }],
        student_phone: [
          { required: true, message: "请输入", trigger: "blur" },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: "请输入正确的号码格式",
            trigger: "blur",
          },
        ],
        subject_id: [{ required: true, message: "请输入", trigger: "blur" }],
        class_id: [{ required: true, message: "请输入", trigger: "blur" }],
      },
    };
  },
  computed: {
    title() {
      return this.formData.id ? "修改学员信息" : "添加学员信息";
    },
  },

  created() {
    this.getSbujectList();
  },

  methods: {
    closeDialog() {
      this.formData = {
        student_state: 1,
        student_sex: 1,
        class_id: "",
        student_name: "",
        student_password: "",
        subject_id: "",
        student_phone: "",
      };
      this.$refs.formRef.resetFields();
    },
    async btnOk() {
      // 校验
      try {
        await this.$refs.formRef.validate();
      } catch (error) {
        return console.log(error);
      }
      // 请求
      if (this.formData.id) {
        await editStudentInfoApi(this.formData);
        // 修改
        this.$message.success("修改成功");
      } else {
        // 新增
        await addStudentInfoApi(this.formData);
        this.$message.success("添加成功");
      }
      this.$emit("updateList");
      this.dialogShow = false;
    },

    // 获取归属学科下拉数据
    async getSbujectList() {
      let res = await getSubjectInfoAPi({
        page: 1,
        limit: 1000,
      });
      this.subjectList = res;
    },

    // 获取归属班级下拉数据
    async subChange() {
      let { list } = await getClassInfoApi({
        page: 1,
        limit: 100,
        subject_id: this.formData.subject_id,
      });
      this.classList = list;
    },
    // changeSubject() {},
  },
};
</script>

<style lang="scss" scoped></style>
